
<template>
    <div>      
        <h1>平台权限管理</h1>
        <Table :columns="columns1" :data="data1"></Table>
        <router-link to="addService">
        </router-link>
        <h1>添加用户组</h1>
        <Row>
            <Row>
                <Col span="3"><Span>权限选择</Span></Col>
                <Col span="10">
                    <CheckboxGroup v-model="checkgroup" @on-change="change">
                        <Checkbox label="1" value="1">
                            <Span>经销商管理</Span>
                        </Checkbox>
                        <Checkbox label="2" value="2">
                            <Span>证书管理</Span>
                        </Checkbox>
                        <Checkbox label="3" value="3">
                            <Span>服务管理</Span>
                        </Checkbox>
                        <Checkbox label="4" value="4">
                            <Span>提现管理</Span>
                        </Checkbox>
                        <Checkbox label="5" value="5">
                            <Span>权限管理</Span>
                        </Checkbox>
                    </CheckboxGroup>
                </Col>
            </Row>
            <Row>
                <Col span="2"><Span>用户组名</Span></Col>
                <Col span="6"><Input v-model="name"></Input></Col>
            </Row>
            <Row>
                <Col span="2"><Span>用户组描述</Span></Col>
                <Col span="6"><Input v-model="des"></Input></Col>
            </Row>
            <Row type="flex" justify="center">
                <Col span="16"><Button type="primary" @click="ok">确定</Button></Col>
            </Row>
        </Row>         
    </div>
</template>
<script>
export default {
    data() {
        return {
            name:'',
            des:'',
            checkgroup:['1'],
            columns1:[
                {
                    title: "用户组",
                    key: "name"
                },
                {
                    title: "描述",
                    key: "des"
                },
                 {
                    title: "权限号",
                    key: "mid"
                },
                {
                    title: "操作",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index);
                                        }
                                    }
                                },
                                "删除"
                            ),                             
                        ]);
                    }
                }
            ],
            data1: [
                {
                    name: "John Brown",
                    age: 18,
                    address: "New York No. 1 Lake Park",
                    date: "2016-10-03"
                },
                {
                    name: "Jim Green",
                    age: 24,
                    address: "London No. 1 Lake Park",
                    date: "2016-10-01"
                },
                {
                    name: "Joe Black",
                    age: 30,
                    address: "Sydney No. 1 Lake Park",
                    date: "2016-10-02"
                },
                {
                    name: "Jon Snow",
                    age: 26,
                    address: "Ottawa No. 2 Lake Park",
                    date: "2016-10-04"
                }
            ]
        };
    },
    mounted() {
        let mid = localStorage.getItem("mid");
        if (mid == 'undefined' || mid == ''){
            alert("您还没有登陆");
            this.$router.push("admin");
            return;
        }
        if (mid.indexOf('5') < 0){
            alert("您没有权限");
            return;
        }
        this.getPowerManagement();
    },
    methods: {
        getPowerManagement(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getPowerManagement`,
                data: qs.stringify({})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.data1 = response.data.data;                       
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },
        ok(){
            if (this.name == '' || this.des == '' || this.checkgroup.length == 0) {
                alert("请填写完整");
                return;
            }
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/insertPowerManagement`,
                data: qs.stringify({name:this.name, des:this.des, mid:this.checkgroup.toString(), aid:localStorage.getItem("aid")})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.getPowerManagement();
                        alert("添加成功")                       
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },
        change(data){
            this.checkgroup = data;
        },
        remove(index){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/deletePowerManagement`,
                data: qs.stringify({id:`${this.data1[index].id}`, aid:localStorage.getItem("aid")})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.data1.splice(index, 1);                     
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        }
    }
};
</script>

   



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
    margin-bottom: 20px;
    margin-top:20px;
}
button {
    margin-top: 50px;
}
.text{
    margin-bottom: 10px;
}
span{
    display: inline-block;
    width: 100px;
    font-size: 16px;
    vertical-align:top;
}


</style>
